<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Painting in Java SWT</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, SWT, Cairo, drawing, Java, programming, linux">
<meta name="description" content="In this part of the Java SWT tutorial, we do some
painting.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Painting in Java SWT</h1>

<p>
In this part of the Java SWT tutorial, we will do some painting.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
When do we need to paint? There are situations, when we need to create a 
widget from scratch. In such a case, we need to do painting. Or we want 
to create charts, special ornaments, effects or widget enhancements. 
</p>


<h2>Colors</h2>

<p>
In the first example, we will work with colors. A color is an object 
representing a combination of 
Red, Green, and Blue (RGB) intensity values.
In Java SWT, valid RGB values are in the range 0 to 255. 
</p>

<pre class="code">
package com.zetcode;

import org.eclipse.swt.events.PaintEvent;
import org.eclipse.swt.events.PaintListener;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
 * ZetCode Java SWT tutorial
 *
 * This program draws three rectangles.
 * The interiors are filled with
 * different colors.
 * 
 * @author jan bodnar
 * website zetcode.com
 * last modified June 2009
 */
public class SWTApp {

    private Shell shell;

    public SWTApp(Display display) {

        shell = new Shell(display);

        shell.addPaintListener(new ColorsPaintListener());

        shell.setText("Colors");
        shell.setSize(360, 120);
        shell.setLocation(300, 300);
        shell.open();

        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) {
                display.sleep();
            }
        }
    }

    private class ColorsPaintListener implements PaintListener {

        public void paintControl(PaintEvent e) {

            drawRectangles(e);

            e.gc.dispose();
        }
    }

    private void drawRectangles(PaintEvent e) {
        Color c1 = new Color(e.display, 50, 50, 200);
        e.gc.setBackground(c1);
        e.gc.fillRectangle(10, 15, 90, 60);

        Color c2 = new Color(e.display, 105, 90, 60);
        e.gc.setBackground(c2);
        e.gc.fillRectangle(130, 15, 90, 60);

        Color c3 = new Color(e.display, 33, 200, 100);
        e.gc.setBackground(c3);
        e.gc.fillRectangle(250, 15, 90, 60);

        c1.dispose();
        c2.dispose();
        c3.dispose();
    }

    public static void main(String[] args) {
        Display display = new Display();
        new SWTApp(display);
        display.dispose();
    }
}
</pre>

<p>
In our example, we will draw three rectangles and fill them with
three different colors. 
</p>


<pre class="explanation">
shell.addPaintListener(new ColorsPaintListener());
</pre>

<p>
We create a listener for paint events. 
</p>

<pre class="explanation">
private class ColorsPaintListener implements PaintListener {

    public void paintControl(PaintEvent e) {

        drawRectangles(e);

        e.gc.dispose();
    }
}
</pre>

<p>
When a paint event is received, the <code>paintControl()</code> is executed.
The actual drawing is delegated to the drawRectangles() method.
</p>

<pre class="explanation">
Color c1 = new Color(e.display, 50, 50, 200);
e.gc.setBackground(c1);
e.gc.fillRectangle(10, 15, 90, 60);
</pre>

<p>
We create a color object and fill a rectangle with it. 
</p>

<pre class="explanation">
c1.dispose();
c2.dispose();
c3.dispose();
e.gc.dispose();
</pre>

<p>
Resources are released. 
</p>

<img src="/img/gui/swt/colors.png" alt="Colors">
<div class="figure">Figure: Colors</div>



<h2>Basic shapes</h2>

<p>
The next example draws some basic shapes onto the window. 
</p>

<pre class="code">
package com.zetcode;

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.PaintEvent;
import org.eclipse.swt.events.PaintListener;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
 * ZetCode Java SWT tutorial
 *
 * In this program, we draw some
 * basic shapes of the Java SWT library
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified June 2009
 */

public class SWTApp {

    private Shell shell;

    public SWTApp(Display display) {

        shell = new Shell(display);

        shell.addPaintListener(new ArcExamplePaintListener());

        shell.setText("Basic shapes");
        shell.setSize(430, 300);
        shell.setLocation(300, 300);
        shell.open();

        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) {
                display.sleep();
            }
        }
    }

    private class ArcExamplePaintListener implements PaintListener {

        public void paintControl(PaintEvent e) {

            drawShapes(e);
            e.gc.dispose();
        }
    }

    private void drawShapes(PaintEvent e) {

        e.gc.setAntialias(SWT.ON);

        e.gc.setBackground(new Color(e.display, 150, 150, 150));

        e.gc.fillRectangle(20, 20, 120, 80);
        e.gc.fillRectangle(180, 20, 80, 80);
        e.gc.fillOval(290, 20, 120, 70);

        e.gc.fillOval(20, 150, 80, 80);
        e.gc.fillRoundRectangle(150, 150, 100, 80, 25, 25);
        e.gc.fillArc(280, 150, 100, 100, 0, 115);
    }

    public static void main(String[] args) {
        Display display = new Display();
        new SWTApp(display);
        display.dispose();
    }
}
</pre>

<p>
In this example, we will create a rectangle, a square, an ellipse, a circle, 
a rounded rectangle, and an arc.
</p>

<pre class="explanation">
e.gc.fillRectangle(20, 20, 120, 80);
e.gc.fillRectangle(180, 20, 80, 80);
e.gc.fillOval(290, 20, 120, 70);
</pre>

<p>
These lines draw a rectangle a square and an ellipse. 
</p>

<pre class="explanation">
e.gc.fillOval(20, 150, 80, 80);
</pre>

<p>
Here the <code>fillOval()</code> method draws a circle.
</p>

<pre class="explanation">
e.gc.fillRoundRectangle(150, 150, 100, 80, 25, 25);
e.gc.fillArc(280, 150, 100, 100, 0, 115);
</pre>

<p>
These two lines draw a rounded rectangle and an arc. 
</p>

<img src="/img/gui/swt/shapes.png" alt="Basic shapes">
<div class="figure">Figure: Basic shapes</div>



<h2>Transparent rectangles</h2>

<p>
Transparency is the quality of being able to see through a material. 
The easiest way to understand transparency is to imagine a piece of 
glass or water. Technically, the rays of light can go
through the glass and this way we can see objects behind the glass.
</p>

<p>
In computer graphics, we can achieve transparency effects using alpha 
compositing. Alpha compositing is the process of combining an image with a 
background to create the appearance of partial transparency. 
The composition process uses an alpha channel. (wikipedia.org, answers.com)
</p>

<pre class="code">
package com.zetcode;

import org.eclipse.swt.events.PaintEvent;
import org.eclipse.swt.events.PaintListener;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
 * ZetCode Java SWT tutorial
 *
 * This program draws ten
 * rectangles with different
 * levels of transparency
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified June 2009
 */

public class SWTApp {

    private Shell shell;

    public SWTApp(Display display) {

        shell = new Shell(display);

        shell.addPaintListener(new ArcExamplePaintListener());

        shell.setText("Transparent rectangles");
        shell.setSize(590, 120);
        shell.setLocation(300, 300);
        shell.open();

        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) {
                display.sleep();
            }
        }
    }

    private class ArcExamplePaintListener implements PaintListener {

        public void paintControl(PaintEvent e) {

            drawRectangles(e);

            e.gc.dispose();
        }
    }

    private void drawRectangles(PaintEvent e) {

        Color blue = new Color(e.display, 0, 0, 255);
        e.gc.setBackground(blue);

        for (int i = 1; i &lt; 11; i++) {
            e.gc.setAlpha(i * 25);
            e.gc.fillRectangle(50 * i, 20, 40, 40);
        }

        blue.dispose();
    }

    public static void main(String[] args) {
        Display display = new Display();
        new SWTApp(display);
        display.dispose();
    }
}
</pre>

<p>
In the example we will draw ten rectangles with different levels of transparency. 
</p>

<pre class="explanation">
e.gc.setAlpha(i * 25);
</pre>

<p>
Here we set the aplha transparency value for the painting process. 
</p>


<img src="/img/gui/swt/transparency.png" alt="Transparent rectangles">
<div class="figure">Figure: Transparent rectangles</div>


<h2>Donut</h2>

<p>
In the following example we create an complex shape by rotating a bunch of ellipses. 
</p>

<pre class="code">
package com.zetcode;

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.PaintEvent;
import org.eclipse.swt.events.PaintListener;
import org.eclipse.swt.graphics.Transform;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
 * ZetCode Java SWT tutorial
 *
 * This program creates a donut shape
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified June 2009
 */
public class SWTApp {

    private Shell shell;

    public SWTApp(Display display) {

        shell = new Shell(display);

        shell.addPaintListener(new DonutPaintListener());

        shell.setText("Donut");
        shell.setSize(430, 300);
        shell.setLocation(300, 300);
        shell.open();

        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) {
                display.sleep();
            }
        }
    }

    private class DonutPaintListener implements PaintListener {

        public void paintControl(PaintEvent e) {

            drawDonut(e);

            e.gc.dispose();
        }
    }

    private void drawDonut(PaintEvent e) {
        int w = e.width;
        int h = e.height;

        e.gc.setAntialias(SWT.ON);

        Transform tr = new Transform(e.display);
        tr.translate(w / 2, h / 2);
        e.gc.setTransform(tr);

        for (int rot = 0; rot &lt; 36; rot++) {
            tr.rotate(5f);
            e.gc.drawOval(-125, -40, 250, 80);
            e.gc.setTransform(tr);
        }
    }

    public static void main(String[] args) {
        Display display = new Display();
        new SWTApp(display);
        display.dispose();
    }
}
</pre>

<p>
In this example, we create a donut. The shapes resembles a cookie, hence the name donut.
</p>

<pre class="explanation">
Transform tr = new Transform(e.display);
tr.translate(w / 2, h / 2);
e.gc.setTransform(tr);
</pre>

<p>
We move the middle of the axis to the center of the window. 
</p>

<pre class="explanation">
for (int rot = 0; rot &lt; 36; rot++) {
    tr.rotate(5f);
    e.gc.drawOval(-125, -40, 250, 80);
    e.gc.setTransform(tr);
}
</pre>

<p>
We do several rotations and draw the ellipses. 
</p>

<img src="/img/gui/swt/donut.jpg" alt="Donut">
<div class="figure">Figure: Donut</div>


<h2>Drawing text</h2>

<p>
In the next example, we draw some text on the window. 
</p>

<pre class="code">
package com.zetcode;

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.PaintEvent;
import org.eclipse.swt.events.PaintListener;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.graphics.Font;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
 * ZetCode Java SWT tutorial
 *
 * This program draws text
 * on the window
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified June 2009
 */

public class SWTApp {

    Shell shell;

    public SWTApp(Display display) {

        shell = new Shell(display);

        shell.addPaintListener(new LyricsExamplePaintListener());

        shell.setText("Soulmate");
        shell.setSize(380, 300);
        shell.setLocation(300, 300);
        shell.open();

        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) {
                display.sleep();
            }
        }
    }

    private class LyricsExamplePaintListener implements PaintListener {

        public void paintControl(PaintEvent e) {

            drawLyrics(e);
            e.gc.dispose();
        }
    }

    private void drawLyrics(PaintEvent e) {
        e.gc.setAntialias(SWT.ON);

        Font font = new Font(e.display, "Purisa", 10, SWT.NORMAL);
        Color color = new Color(e.display, 25, 25, 25);

        e.gc.setForeground(color);
        e.gc.setFont(font);

        e.gc.drawText("Most relationships seem so transitory", 20, 30);
        e.gc.drawText("They're good but not the permanent one", 20, 60);
        e.gc.drawText("Who doesn't long for someone to hold", 20, 120);
        e.gc.drawText("Who knows how to love without being told", 20, 150);
        e.gc.drawText("Somebody tell me why I'm on my own", 20, 180);
        e.gc.drawText("If there's a soulmate for everyone", 20, 210);


        font.dispose();
    }

    public static void main(String[] args) {
        Display display = new Display();
        new SWTApp(display);
        display.dispose();
    }
}
</pre>

<p>
We display part of the lyrics from the Natasha Bedingfields Soulmate song. 
</p>

<pre class="explanation">
Font font = new Font(e.display, "Purisa", 10, SWT.NORMAL);
</pre>

<p>
Here we specify the font, that we use. Purisa, 10px, normal.
</p>


<pre class="explanation">
e.gc.drawText("Most relationships seem so transitory", 20, 30);
</pre>

<p>
The <code>drawText()</code> method draws text onto the window. 
</p>

<img src="/img/gui/swt/lyrics.png" alt="Soulmate">
<div class="figure">Figure: Soulmate</div>


<p>
In this chapter of the Java SWT tutorial, we did some painting.
</p>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified June 11, 2009  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
